<script setup>
import Toast from '@vant/weapp/dist/toast/toast';
import { getAiImgRecordInfo } from "@/api/painting";
import { useAppStore } from '@/store';

import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const appStore = useAppStore()

const queryItem = ref({})
const activeInfo = ref({})

// 点击选中某一项
function clickItem(e, i) {
    activeInfo.value = {
        imageFileUrl: queryItem.value.orgImgPath,
        prompt: e,
        activeIndex: i,
    }
}

// 校验方法
function verifyFn() {
    const isTrue = Object.keys(activeInfo.value).length !== 0
    if (!isTrue) {
        activeInfo.value = {
            imageFileUrl: queryItem.value.orgImgPath,
            prompt: queryItem.value.imgContent[0],
            activeIndex: 0,
        }
    }
}

// 跳转页面
function toPage(e) {
    verifyFn()
    if (e === 1) {
        const data = Object.assign({}, activeInfo.value, { id: appStore.filterHomeCategory(1) })
        uni.navigateTo({
            url: `/draw/textGeneratePic/index?item=${JSON.stringify(data)}`
        })
    } else if (e === 2) {
        const data = Object.assign({}, activeInfo.value, { id: appStore.filterHomeCategory(12), modelTypeId: 12 })
        uni.navigateTo({
            url: `/newEditionDraw/bgRedrawing/index?item=${JSON.stringify(data)}`
        })
    } else {
        const data = Object.assign({}, activeInfo.value, { id: appStore.filterHomeCategory(10), modelTypeId: 10 })
        uni.navigateTo({
            url: `/draw/vipOrgGenerationBgc/index?item=${JSON.stringify(data)}`
        })
    }
}

// 复制文字
function copyFn(item) {
    uni.setClipboardData({
        data: item,
        success() {
            uni.showToast({
                title: '复制成功',
                icon: 'none'
            })
        }
    })
}

// 获取详情信息
async function getAiImgRecordInfoFn() {
    const res = await getAiImgRecordInfo(queryItem.value.id)
    queryItem.value = Object.assign(queryItem.value, res.data)
    queryItem.value.imgContent = queryItem.value.imgContent.split('|')
}

onLoad((e) => {
    if (e.data) {
        queryItem.value = JSON.parse(e.data)
        getAiImgRecordInfoFn()
    }
})
</script>

<template>
    <div class='imgCreateTextDetail'>
        <NavBar>{{ queryItem?.title }}</NavBar>
        <div class="container">
            <div class="img_box" @click="uplaodImgFn">
                <img v-if="queryItem?.orgImgPath" :src="queryItem?.orgImgPath" mode="aspectFit" class="imgSty" alt="">
            </div>
            <div class="content_box">
                <div class="title">生成指令词</div>
                <div class="card" :class="{ active: activeInfo.activeIndex === index }"
                    v-for="item, index of queryItem.imgContent" @click="clickItem(item, index)">
                    <div class="content" v-html="item">
                    </div>
                    <div class="copy_text" @click="copyFn(item)">复制文字</div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer_placeholder"></div>
            <div class="footer_content">
                <div class="btnList" v-if="+queryItem.tabType === 0">
                    <div class="left" @click="toPage(1)">去文生图</div>
                    <div class="left" @click="toPage(3)">商品背景</div>
                    <div class="right" @click="toPage(2)">背景生成</div>
                </div>
                <div class="btnList" v-else>
                    <div class="left" @click="toPage(2)">背景生成</div>
                    <div class="left" @click="toPage(3)">商品背景</div>
                    <div class="right" @click="toPage(1)">去文生图</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.imgCreateTextDetail {
    .container {
        padding: 0 30rpx 30rpx;

        .img_box {
            position: relative;
            box-sizing: border-box;
            height: 356rpx;
            background: var(--a-main-box-bg-color);
            border-radius: 20rpx;
            margin-top: 22rpx;
            padding: 16rpx 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;

            .imgSty {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 20rpx;
            }
        }

        .content_box {
            margin-top: 40rpx;

            .title {
                font-weight: bold;
                font-size: 28rpx;
                color: #FFFFFF;
            }

            .card {
                box-sizing: border-box;
                background: var(--a-main-box-bg-color);
                border-radius: 20rpx;
                padding: 20rpx 24rpx 90rpx;
                position: relative;
                margin-top: 20rpx;
                border: 2rpx solid transparent;

                &.active {
                    border: 2rpx solid var(--a-main-color);
                }

                .content {
                    font-size: 28rpx;
                    color: var(--a-one-text-color);
                    line-height: 42rpx;
                    letter-spacing: 1px;
                }

                .copy_text {
                    position: absolute;
                    bottom: 20rpx;
                    right: 20rpx;
                    width: 124rpx;
                    height: 51rpx;
                    border-radius: 26rpx;
                    border: 1rpx solid var(--a-one-text-color);
                    font-size: 24rpx;
                    color: var(--a-one-text-color);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }

    .footer {
        .footer_placeholder {
            height: 176rpx;
        }

        .footer_content {
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 176rpx;
            background: var(--a-main-tabNav-bg-color);
            padding: 28rpx 30rpx 0;


            .btnList {
                display: flex;
                align-items: flex-start;
                justify-content: center;
                gap: 24rpx;
            }

            .left,
            .right {
                flex: 1;
                height: 84rpx;
                border-radius: 42rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .left {
                color: var(--a-main-color);
                border: 1rpx solid var(--a-main-color);
            }

            .right {
                color: var(--a-one-text-color);
                background-color: var(--a-main-color);
            }
        }
    }
}
</style>